{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <base href="/">
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/footer.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/dataAnalysis.css' %}"/>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <style>
        a {
            text-decoration: none;
        }

        body {
            background: #F6F8FA;
        }

        .nav {
            background-color: #34495e;
            height: 80px;
            width: 1330px;
            margin-left: 5px;
            margin-right: 5px;

        }

        .logo {
            width: 250px;
            height: 80px;
            background-color: #aee6a6;
            margin-left: 10px;
        }

        .logo img {
            width: 250px;
            height: 80px;
        }

        .post-right ul {
            clear: both;
            overflow: hidden;
        }

        .post-right ul li {
            width: 48%;
            height: 100px;
            margin-bottom: 50px;
            float: left;
        }

        .post-right ul li:nth-child(even) {
            margin-left: 4%;
        }

        .hot_title a {
            color: #1F1F1F;
        }

        .hot_title a:hover {
            color: #2396ff;
        }

        .hot_img img {
            width: 158px;
            height: 90px;
        }

        .article-meta span {
            color: #1F1F1F;
        }

        .next_article a {
            color: #3498DB;
        }

        .next_article a:hover {
            color: #3332ff;
        }

        .like_content1 ul {
            overflow: hidden;
            margin-left: -10px;
        }

        .like_content1 ul li {
            width: 33.3333%;
            height: 200px;
            float: left;
            padding-left: 10px;
            box-sizing: border-box;
            margin-bottom: 5px;
        }

        .like_content1 ul li .com {
            height: inherit;
            background: skyblue;
        }

        .like_title h1 {
            font-size: 16px;
            font-weight: bold;

        }

        .show_img img {
            width: 264px;
            height: 160px;
        }

        .title a {
            color: #09b8ff;
        }

        .title a:hover {
            color: #3332ff;
        }

        .list_left img {
            height: 190px;
            width: 250px;
            padding-left: 10px;
        }


        .list_title a {
            font-size: 15px;
            color: #1F1F1F;
        }

        .list_title a:hover {
            color: #3332ff
        }

        .list_abstract a {
            color: #353535;
            word-wrap: break-word;
            overflow-wrap: break-word;
            padding-left: 5px;
            padding-right: 5px;
        }


        .pagination ul {
            display: inline-block;
            margin-left: 0;
            margin-bottom: 0;
            padding: 0;
        }

        .pagination ul > li {
            display: inline;
        }

        .pagination ul > .active > a, .pagination ul > .active > span {
            cursor: default;
        }

        .pagination ul > .active > a, .pagination ul > .active > span {
            background-color: #d9534f;
            color: #fff;
        }

        .pagination ul > li > a, .pagination ul > li > span {
            margin: 0 2px;
            float: left;
            padding: 5px 12px;
            background-color: #ddd;
            color: #666;
            border-radius: 2px;
            opacity: .88;
        }

        .pagination ul > li > a:hover, .pagination ul > li > a:focus {
            color: #fff;
            background-color: #d9534f;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="logo">
        <img src="../static/img/logo.jpg">
    </div>
</div>
<nav>
    <!--导航条-->
    <ul class="nav-main">
        <li><a href="">首页</a></li>
        <li id="li-1">在线数据分析<span></span></li>
        <li id="li-2">数据社区<span></span></li>
        <li id="li-3">数据可视化<span></span></li>
        <li><a href="/contact/">关于我们</a></li>
        <li><a href="/help/">帮助中心</a></li>
    </ul>
    <div id="box-1" class="hidden-box hidden-loc-index">
        <ul>
            <li><a href="/analysis/">数据分析</a></li>
        </ul>
    </div>
    <div id="box-2" class="hidden-box hidden-loc-us">
        <ul>
            {% for catagory in allcategory %}
                <li><a href="{% url 'index' %}blog/list{{ catagory.id }}">{{ catagory.nama }}</a></li>
            {% endfor %}
        </ul>
    </div>
    <div id="box-3" class="hidden-box hidden-loc-info">
        <ul>
            <li><a href="/visualization/bar/">数据可视化</a></li>
        </ul>
    </div>
</nav>
</body>
</html>